<template>
    <div class="list">
        <Title>历史订单</Title>
        <div class="table">
            <el-table :data="borrow.list" border style="width: 100%">

                <el-table-column prop="id" label="ID" width="50" />
                <el-table-column prop="title" label="商品名">
                    <template #default="scope">
                        <span style="cursor: pointer" @click="toDetail(scope.row.book_id)">{{ scope.row.title }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="价格" width="120">
                    <template #default="scope">
                        {{ '￥' + formatPrice(scope.row.price) }}
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="时间" />
                <el-table-column label="状态">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status === 1">待发货</el-tag>
                        <el-tag type="info" v-if="scope.row.status === 2">已发货</el-tag> <el-button v-if="scope.row.status === 2" link @click="toReturn(scope.row.id)">确认收货</el-button>
                        <el-tag type="success" v-if="scope.row.status === 3">已签收</el-tag>
                        <el-tag type="success" v-if="scope.row.status === 4">售后</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import Title from '@/components/Title.vue'
import { formatPrice } from '@/utils/formatPrice'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/useUser'
import { record, returnBook} from '@/api/borrow'
import { ElMessage, ElMessageBox } from 'element-plus'

const userStore = useUserStore()

const router = useRouter()

const borrow = reactive({
    list: []
})

const toReturn = (id) => {
    ElMessageBox.confirm('确定已收到货物吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
    .then(() => {
        returnBook({ id }).then(res => {
            if (res.data.code === 200) {
                ElMessage.success(res.data.message)
                getList()
            }
        })
    })
}


//获取借阅清单列表
const getList = () => {
    record({
        user_id: userStore.userinfo.id
    }).then(res => {
        if (res.data.code == 200) {
            borrow.list = res.data.books
        }
        else {
            ElMessage.error(res.data.message)
        }
    })
}

getList()


const toDetail = (id) => {
    router.push('/detail/' + id)
}

</script>

<style scoped lang='less'>
.list {
    height: 100%;

    .table {
        margin-top: 20px;
        height: 600px;
        overflow-y: auto;
    }
}
</style>